<template>
  <base-layout
    :visibleContent="true"
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="'1000px'"
  >
    <template #searchPanel>
      <el-row type="flex"  justify="end" align="middle">
        <span aligin="left" class="hederTitle">发送客户列表</span>
        <el-button
          icon="el-icon-plus"
          type="success"
          size="small"
          @click="addCustomer(1)"
          >自主添加客户</el-button
        >
        <el-button
          icon="el-icon-plus"
          type="success"
          size="small"
          @click="addCustomer(2)"
          >保险即将到期客户</el-button
        >
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="small"
          @click="addCustomer(3)"
          >工单完成未回访客户</el-button
        >
        <job-shop
          v-model="filters.storeId"
          placeholder="所属门店"
          size="small"
          style=""
        />
        <el-select
          clearable
          v-model="filters.memberLevelDictId"
          placeholder="会员等级"
          size="small"
        >
          <el-option
            v-for="item in dict['客户会员等级']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-select
          clearable
          v-model="filters.clientType"
          placeholder="客户类型"
          size="small"
        >
          <el-option
            v-for="item in dict['客户类型']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-input
          class="inputCalss"
          clearable
          size="small"
          v-model="filters.clientNameAndPhone"
          placeholder="请输入客户姓名/手机号"
        />
        <el-button
          icon="el-icon-search"
          type="primary"
          size="small"
          @click="_clientList"
          >搜索</el-button
        >
      </el-row>
      <el-row>
        <data-table
          :value="userList"
          :has-action="true"
          :table-column-attributes="tableColumnAttributes"
          :totalCount="tableDataListLength"
          :isShowPage="true"
          :localPage="true"
        >
          <template #action="{ row }">
            <i
              class="el-icon-delete"
              title="删除"
              style="color: red; margin-left: 20px; cursor: pointer"

              @click="delTableList(row)"
            ></i>
          </template>
        </data-table>
      </el-row>
    </template>

    <template #contentPanel>
      <el-row type="flex" justify="space-between">
        <el-col :span="11">
          <div class="title">其它信息</div>
          <div class="customizeTable">
            <div class="title somerTitle">客户关怀模板</div>
            <ul>
              <li v-for="(item,index) in smsKeyData" :key="index">
                <span>{{item.desc}}</span>
                <span>{{item.key}}</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="title">发送类容模板</div>
          <el-input class="inputContent" type="textarea" v-model="addForm.content" rows="6"/>
        </el-col>
      </el-row>
      <el-row type="flex" justify="end" align="end" >
        <el-button type="danger" @click="sumbit" class="button">发送短信</el-button>
      </el-row>
    </template>
    <template #dialog>
      <ClinetListMultiple
        @roleIdListSelectCheck="clientListSelectCheck"
        :type="type"
      />
    </template>
  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import { getDict, getStoreId, parseTimeToYMDHMS } from '@/utils'
import ClinetListMultiple from '../components/ClinetListMultiple'
import { clientList } from '@/api/after-sale/client/client'
import { caringGetSmsKey,caringSave } from '@/api/after-sale/client/caring'
export default {
  components: {
    ClinetListMultiple,
  },
  mixins: [baseMixin({})],
  data() {
    return {
      addForm:{
        clientIds:[],//客户集合
        content:'',//发送内容
      },
      dict: {},
      tableColumnAttributes: [
        {
          name: '所属门店',
          value: 'storeName',
          type: 'text',
        },
        {
          name: '客户名称',
          value: 'clientName',
          type: 'text',
        },
        {
          name: '手机号',
          value: 'phone',
          type: 'text',
        },
        {
          name: '驾驶证号',
          value: 'jszNum',
          type: 'text',
        },
        {
          name: '性别',
          value: 'genderCst',
          type: 'text',
        },
        {
          name: '会员等级',
          value: 'memberLevelDictValue',
          type: 'text',
        },
        {
          name: '客户来源',
          value: 'clientSource',
          type: 'text',
        },
        {
          name: '客户类型',
          value: 'clientType',
          type: 'text',
        },
        {
          name: '销售顾问',
          value: '',
          type: 'text',
        },
        {
          name: '最近登录',
          value: 'loginTime',
          type: 'text',
        },
        {
          name: '最近到店',
          value: 'reachStoreTime',
          type: 'text',
        },
      ],
      userList: [], //门店用户
      filters: {
        storeId: '', //所属门店
        memberLevelDictId: '', //会员等级
        clientType: '', //客户类型
        clientNameAndPhone: '', //手机号或姓名
      },
      type: 1, //自主选择客户 2 保险即将到期客户 3 工完成未回访客户
      smsKeyData:[],
      rules: {},
      options: [],
    }
  },
  async created() {
    this.dict = getDict(['客户类型', '客户会员等级'], '', true)
    this._clientList()
    this._caringGetSmsKey();
  },
  computed: {
    tableDataListLength() {
      return this.userList.length
    },
  },
  methods: {
    sumbit(){
      if(this.userList.length>0&&this.addForm.content){
        this.userList.forEach(item=>{
          this.addForm.clientIds.push(item.id);
        })
        this.addForm.clientIds=this.addForm.clientIds.join();
        this.addForm.storeId=getStoreId();
        caringSave(this.addForm).then(res=>{
          if(res.success){
            this.$message.success('新增成功');
            this.closeRouter();
          }
        })
      }else{
        this.$message.error('请选择客户且输入要发送的短信信息!');
      }
    },
    //删除数据
    delTableList(row){
     let _index= this.userList.findIndex(item=>{
        if(item.id==row.id){
          return item;
        }
      })
      if(_index){
        this.userList.splice(_index,1);
      }
    },
    /**
     * 过滤重复数据
     */
    filtersTableList(list) {
      list.forEach((element) => {
       let _index= this.userList.findIndex((item) => {
          if (element.id == item.id) {
            return item
          }
        })
        if(_index){
          this.userList.splice(_index,1)
        }
      })
    },
    //自主选择添加客户事件
    clientListSelectCheck(select) {
      this.filtersTableList(select)
      this.userList=this.userList.concat(select);
      this.dialogVisible = false
    },
    //添加客户
    addCustomer(type) {
      this.type = type
      this.dialogVisible = true
      this.dialogTitle = '客户选择'
    },
    //获取短信信息
    _caringGetSmsKey(){
      caringGetSmsKey().then(res=>{
        let {success,data}=res;
        if(success){
          this.smsKeyData=data;
        }
      })
    },
    //搜索用户数据
    _clientList() {
      this.userList = []
      clientList(this.filters, 200, 1).then((res) => {
        let { success, data } = res
        if (success) {
          this.userList = data.content
        }
      })
    },
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
.hederTitle {
  width: 200px;
  line-height: 40px;
  flex: auto;
}

.inputCalss {
  width: 150px;
}
.title{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
.somerTitle{
  text-align: center;
}
.customizeTable{
  border: 1px solid #CECDCD;
  height: 180px;
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    li{
      // border: 1px solid red;
      flex: 1;
      display: flex;
      height: 40px;
      line-height: 40px;
      span{
        display: inline-block;
        flex: 1;
        border: 1px solid #C7C6C6;
        text-align: center;
        font-size: 18px;
      }
    }
  }
}
.button{
  margin-top: 10px;
}
.inputContent {
  /deep/ textarea{
  height: 185px;
}
}
</style>
